<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 
            .lazy
                在vue的v-model绑定中， 对于输入型标签，默认完成input事件绑定
                .lazy 修饰即是将 input 事件切换为 change 事件
         -->
        <p>msg:{{msg}}</p>
        <input type="text" v-model="msg">
        <input type="text" v-model.lazy ="msg">
        <!-- 
            .number
                在v-model完成修改数据赋值前，进行字符串到数值的转换
                本质上调用了 JS Number.parseFloat()
                1、如果第一个位是可以转换位数值的，直接调用 Number.parsFloat()
                2、如果第一位就是非数值，会停止转换数值直接进行字符串记录
         -->
        <p>num:{{num}}</p>
        <input type="number" v-model.number="num">
        <input type="text" v-model.number="num">
        <input type="range" min="0" step="1" max = "10" v-model.number="num">
        <!-- 
            .trim
         -->
        <p>info:{{info}}</p>
        <input type="text" v-model.trim="info">
    </div>
</body>
<script>
    new Vue ({
        el:"#app",
        data:{
            msg:"测试",
            num:2,
            info:"默认值"
        }
    })
</script>
</html>